<template>
  <div style="height: 95%; overflow-y: auto; overflow-x: hidden">
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <el-button type="text" @click="goback"><i class="el-icon-back" style="color: white;font-size: xx-large"></i></el-button>
      <h2 style="margin-top: 20px; margin-left: 5px">安全专栏内容</h2>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="6" >
        <h2> {{securityColumn.title}}</h2>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-col :span="6" >
        <span style="color: #d3dce6">发布时间：{{securityColumn.date}}</span>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="margin-top: 20px">
      <el-col :span="16" >
        <div class="pre-line" style="font-size: 20px" v-html="securityColumn.content"></div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="margin-top: 30px">
      <el-col :span="16" >
        <div v-for="file in securityColumn.files" :key="file.name" @click="handlePictureCardPreview(file.url)">
          <el-image style="width: 100%; height: 400px" fit="contain" v-if="matchType(file.name)==='image'" :src="file.url"></el-image>
        </div>
        <span v-for="file in securityColumn.files" :key="file.url" style="margin-right: 10px">
          <el-checkbox v-if="matchType(file.name)!='image'" v-model="file.checked" border>
            {{file.name}}
          </el-checkbox>
        </span>
        <el-button v-if="haveAttachment" class="el-blue-button" @click="downloadFiles"  size="small" style="margin-left: 20px">下载附件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { baseURL } from '@/config/baseConfig'
import request from '@/network/request'

export default {
  name: 'showsecurityColumn',
  data () {
    return {
      securityColumnId: this.$route.query.data,
      dialogImageUrl: '',
      dialogVisible: false,
      securityColumn: {
        id: 1,
        title: '',
        content: '',
        date: '',
        files: []
      },
      haveAttachment: false
    }
  },
  methods: {
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file
      this.dialogVisible = true
    },

    // 根据文件名后缀区分 文件类型
    /*
     * @param: fileName - 文件名称
     * @param: 数据返回 1) 无后缀匹配 - false
     * @param: 数据返回 2) 匹配图片 - image
     */
    matchType (fileName) {
      // 后缀获取
      var suffix = ''
      // 获取类型结果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false
        return result
      }
      // 图片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.some(function (item) {
        return item === suffix
      })
      if (result) {
        result = 'image'
        return result
      };
      // 其他 文件类型
      result = 'other'
      return result
    },
    goback: function () {
      this.$router.back(-1)
    },
    downloadFiles () {
      // 用创建‘a’的方式下载附件
      console.log(this.securityColumn.files)

      this.securityColumn.files.forEach(file => {
        if (file.checked === true) {
          const link = document.createElement('a')
          link.style.display = 'false'
          link.href = file.url
          console.log(link.href)
          link.click()
        }
      })
    }
  },
  created () {
    request({
      method: 'get',
      url: '/bulletin/showsafetycolumn',
      params: {
        id: this.securityColumnId
      }
    }).then(res => {
      if (res.data != null) {
        this.securityColumn = res.data.data
        this.securityColumn.files.forEach((file) => {
          if (this.matchType(file.name) !== 'image') {
            this.haveAttachment = true
          }
          // Vue.set就不行
          this.$set(file, 'checked', false)
          file.url = baseURL + '/' + file.url
          // file:{name:'',url:'',checked:''}
        })
        console.log(this.securityColumn)// 请求的返回体
      } else {
        console.log('未获取到数据')
      }
    }).catch((error) => {
      console.log(error)// 异常
    })
    this.securityColumn.content.replace(/\n/g, '<br>')
    console.log('显示通知' +
      this.$route.query.data
    )
  }
}
</script>

<style scoped>
.pre-line {
  white-space: pre-line;
}
</style>
